<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue路由 入门2</title>
</head>
<body>
<div id="app">
    <!-- 二 -->
    <router-link to="/user">用户</router-link>
    <router-link to="/dog">狗</router-link>
    <!-- 三 -->
    <router-view></router-view>
</div>
<!-- 四 -->
<template id="userTem">
    <div>
        <h3>userTem</h3>
        <router-link to="/user/user1">user1 哈哈哈！！！</router-link>
        <router-link to="/user/user2">user2 ？？？吼吼吼</router-link>
        <router-view></router-view>
    </div>
</template>

<template id="dogTem">
    <div>
        <h3>dogTem</h3>
    </div>
</template>

<template id="user1Tem">
    <div>
        <h3>user1Tem！！！</h3>
    </div>
</template>
<template id="user2Tem">
    <div>
        <h3>user2Tem？？？</h3>
    </div>
</template>
<!-- 一。引入 -->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    /* 四 */
    let userCom = {
        template: `#userTem`
    }
    let user1Com = {
        template: `#user1Tem`
    }
    let user2Com = {
        template: `#user2Tem`
    }
    let dogCom = {
        template: `#dogTem`
    }
    // 五
    const router = new VueRouter({
        routes: [{
            path: `/user`,
            component: userCom,
            children: [{
                path: `/user/user1`,
                component: user1Com
            }, {
                path: `/user/user2`,
                component: user2Com
            }]
        }, {
            path: `/dog`,
            component: dogCom
        }]

    })
    const APP = new Vue({
        el: `#app`,
        // 六
        router: router
    })
</script>
</body>
</html>
